
import type { MenuProps } from 'antd';
import {Layout, Menu, Avatar, Space, Dropdown, message, Button} from 'antd';
import {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    DownOutlined,
    SmileOutlined,
    KeyOutlined, QuestionOutlined, ShopOutlined, LikeOutlined, FileOutlined, ProfileOutlined
} from '@ant-design/icons';
import {Link, useModel} from 'umi';
const { Header } = Layout;
import './Header.less';
import MenuItem from "antd/es/menu/MenuItem";
import React, { useState } from 'react';
import Login from "@/components/Login/Login";
const HeaderView = () => {
    const { isLogin, login, logout } = useModel('userModel');
    const [selectedKeys, setSelectedKeys] = useState([]);
    const menuItems:MenuItem[]= [
         { label: ( <Link to="/resume">我的简历</Link>), key: 'Resume', icon: <LaptopOutlined /> },
        { label: ( <Link to="/">简历模板</Link>), key: 'templates', icon: <LaptopOutlined /> },
        { label: ( <Link to="/passageDetail">名企热招</Link>), key: 'hotJobs', icon: <NotificationOutlined /> },
        { label:  ( <Link to="/">范文例句</Link>), key: 'helper', icon: <LaptopOutlined /> },
        { label:  ( <Link to="/passage">求职攻略</Link>), key: 'Passage', icon: <LaptopOutlined /> },
    ];
    const items: MenuProps['items'] = [
        {
            key: '/profile',
            icon: <ProfileOutlined />,
            label: '基本信息',
        },
        {
            key: '/member权益',
            icon: <FileOutlined />,
            label: '会员权益',
        },
        {
            key: '/resume',
            icon: <LikeOutlined />,
            label: '我的简历',
        },
        {
            key: '/favorites',
            icon: <ShopOutlined />,
            label: '我的收藏',
        },
        {
            key: '/orders',
            icon: <ShopOutlined />,
            label: '我的订单',
        },
        {
            key: '/tutorial',
            icon: <KeyOutlined />,
            label: '使用教程',
        },
    ];
    const handleLogoClick = () => {
        setSelectedKeys([]); // 清空选中状态

    };
    const handleMenuClick = (e) => {
        const key = e.key;
        setSelectedKeys([key]); // 更新选中状态
    };
    const onClick: MenuProps['onClick'] = ({ key }) => {
        message.info(`Click on item ${key}`);
    };
    return (
        <Header className="top-header">
            <div className="logo" onClick={handleLogoClick}>
                <Link to="/">
                    <h1>老鱼简历</h1>
                </Link>
            </div>
            <Menu theme="light" onClick={handleMenuClick} selectedKeys={selectedKeys} mode="horizontal" items={menuItems}></Menu>
            <div className="right">
                {isLogin=="true" ? (
                    <Dropdown menu={{ items,onClick  }} placement="bottomCenter">
                        <div className="user-info">
                            <Avatar icon={<UserOutlined />} />
                            <span className="username">用户名</span>
                        </div>

                    </Dropdown>
                ) : (
                    //弹窗登录
                    // <div className="user-info">
                    //
                    //     <Login/>
                    // </div>
                    <div className="user-info">
                        <Button type="primary" > <Link to="/login">登录</Link></Button>

                    </div>
                )}

            </div>
        </Header>
    );

};

export default HeaderView;